My project uses Firebase authentication and storage, and is built using React JS.

I have a file which is in the storage bucket at:

gs://myproject.appspot.com/myfolder/fileId

The download URL with token is:

https://firebasestorage.googleapis.com/v0/b/myproject.appspot.com/o/myfolder%2FfileId?alt=media&token=myToken

I want to be able to download the file in my app, so I have the following function within the Firebase class:

  doDownloadFile = (path: string) => {
    app
      .storage()
      .ref()
      .child(path)
      .getDownloadURL()
      .then((url) => {
        console.log(url);
      })
      .catch((error) => {
        console.log('Error: ', error);
      });
  };

(at the moment I'm just getting the URL, not downloading it).

The value of path is the downloadURL as given above (I've checked this by logging it at the top of the doDownloadFile function, and it's being passed in ok).

When I run this code, I get the following error:

Firebase Storage: User does not have permission to access 'https:/firebasestorage.googleapis.com/v0/b/myproject.appspot.com/o/myfolder%2FfileId?alt=media&token=myToken'. (storage/unauthorized)

On Googling I found 2 general solutions to this, but neither have worked for me.

The first is to set the security rules on the storage in the Firebase console. I've set this to:

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth!=null;
    }
  }
}

The second is to add the user firebase-storage@system.gserviceaccount.com as Storage Admin in the GCP console. This has been done.

Neither of these has made any difference, though. I still get the same error.

Where am I going wrong?